<template>
  <div>  
    <h2>循环遍历指令</h2>
    <ul>
      <!-- <li>下标 -- id -- 姓名 -- 绰号</li> -->
      <!-- 循环遍历的时候，必须加 :key 属性，属性值不能重复【原因下一天讲】 -->
      <!-- 如果不需要用index下标，则index可以不写，写成    v-for="item in list" -->
      <li v-for="(item, index) in list" :key="item.id" >
        <input type="checkbox" >
        {{index}}--{{item.id}}--{{item.name}}--{{item.nickname}} 
        <button @click="del(item.id)">删除</button>
      </li>
      
    </ul>

  </div>
</template>

<script>
export default {
  data(){
    return{
    list: [
        { id: 2, name: '宋江', nickname: '及时雨' },
        { id: 3, name: '吴用', nickname: '智多星' },
        { id: 5, name: '林冲', nickname: '豹子头' },
        { id: 7, name: '花荣', nickname: '小李广' }
      ]
  }
  },
methods:{
  del (id){
    // 数组的filter()方法  筛选符合条件的元素
    this.list=this.list.filter(item=>{
      return item.id !==id
    })
  }
}
}
</script>

<style>

</style>